<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" th:replace="layout (title='首页')">
<div th:fragment="content">
    <div class="hmFocus">
        <div class="swiper-container hmFocus170324 wow wOpacity fadeIn" data-wow-delay="0s">
            <div class="swiper-wrapper">
                <div class="swiper-slide" th:each="b : ${banner}">
                    <div class="bgImg"><img th:src="${b.imgSrc}" width="1920" height="750"></div>
                    <div class="hmBan1_box">
                        <div class="hmBanDes ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s"
                             swiper-animate-delay="0.3s">
                            <strong th:text="${b.title}"></strong>
                            <p th:utext="${b.content}"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="hmFmWarper">
            <div class="container">
                <div class="hmFmBox wOpacity wow fadeInRight" data-wow-delay="0.3s">
                    <p align="center"><img src="images/hmfs_lg.png" width="101" height="40"></p>
                    <div class="dsPc">
                    <div class="hmFmBom">
                        <ul class="fmul fmul2">
                            <li><img src="images/fm_i0.png" width="20" height="20">
                                <input class="fmul_int" placeholder="姓名"
                                       onblur="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" maxlength="10" id="telname" type="text"></li>
                            <li><img src="images/fm_i1.png" width="20" height="20">
                                <input class="fmul_int" placeholder="电话" onkeyup="value=value.replace(/[^\d]/g,'')"
                                       maxlength="11" id="teltel" type="tel"></li>
                            <li class="fmMes">
                                <input class="fmul_int" id="telcode" maxlength="6" nkeyup="value=value.replace(/[^\d]/g,'')"  placeholder="验证码" name="" type="text">
                                <a href="javascript:;" id="getCode" class="fmMesInfo">获取验证码</a></li>
                            <li class="fmul_btn">
                                <a href="javascript:;" id="free" class="fmul_submit">免费试用</a></li>
                            <li class="fmul_btn">
                                <a href="https://www.zqsign.com/#/Register" target="_blank"
                                   class="fmul_submit fmul_submit2">立即注册</a>
                            </li>
                        </ul>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="hmCon1 wOpacity wow fadeIn" data-wow-delay="0.0s">
        <div class="container">
            <div class="hmc1_t wOpacity wow fadeIn" data-wow-delay="0.1s">专业的“电子合同 <strong>+</strong> ”服务</div>
            <ul class="hmc1ul clearfix">
                <li class="col-xs-12 col-sm-6 col-md-3 wOpacity wow fadeIn" data-wow-delay="0.1s"
                    th:each="p : ${product}">
                    <a th:href="${p.url}" class="hmc1_aBox cor_333">
                        <span class="hmc1_icon"><img th:src="${p.imgSrc}" width="60" height="60"></span>
                        <strong th:text="${p.title}"></strong>
                        <p th:text="${p.realTitle}"></p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="hmCon2 wOpacity wow fadeIn" data-wow-delay="0.0s">
        <div class="hmc1_t wOpacity wow fadeIn" data-wow-delay="0.1s">丰富的场景化解决方案，覆盖 <strong>80 +</strong> 行业</div>
        <ul class="hmc2ul clearfix">
            <li class="wOpacity wow fadeIn" th:data-wow-delay="${'0.'+(tl.index+1)+'s'}" th:each="s,tl : ${solution}">
                <a th:href="${s.url}" class="hmc2_aBox scaleImg">
                    <div class="overflowHide">
                        <div class="bgImg"><img th:src="${s.imgSrc}" width="480" height="360"></div>
                        <div class="hmc2Layer">
                            <div class="w100">
                                <img th:src="${s.imgSrc2}" width="80" height="80">
                                <strong th:text="${s.title}"></strong>
                                <p th:text="${s.realTitle}"></p>
                            </div>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div class="hmCon3 wOpacity wow fadeIn" data-wow-delay="0.0s">
        <div class="container">
            <div class="hmc1_t wOpacity wow fadeIn" data-wow-delay="0.1s">众签合作伙伴</div>
            <div class="hmhzSwiper wOpacity wow fadeInUp" data-wow-delay="0.3s">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <ul class="m2kh_u2 clearfix">
                                <li th:each="p : ${partner1}">
                                    <div class="m2kh_sbox"><img th:src="${p.imgSrc}"></div>
                                </li>
                            </ul>
                        </div>
                        <div class="swiper-slide">
                            <ul class="m2kh_u2 clearfix">
                                <li th:each="p : ${partner2}">
                                    <div class="m2kh_sbox"><img th:src="${p.imgSrc}"></div>
                                </li>
                            </ul>
                        </div>
                        <div class="swiper-slide">
                            <ul class="m2kh_u2 clearfix">
                                <li th:each="p : ${partner3}">
                                    <div class="m2kh_sbox"><img th:src="${p.imgSrc}"></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <a href="#" class="nLink prev"></a>
                <a href="#" class="nLink next"></a>
            </div>
        </div>
    </div>
    <div class="hmCon4 wOpacity wow fadeIn" data-wow-delay="0.0s">
        <div class="container">
            <div class="hmc1_t wOpacity wow fadeIn" data-wow-delay="0.1s">新闻资讯</div>
            <ul class="hmc4ul clearfix">
                <li class="col-xs-12 col-sm-6 col-md-4 wOpacity wow fadeIn"
                    th:data-wow-delay="${'0.'+(iterStat.index+1)+'s'}" th:each="news,iterStat : ${newsList}">
                    <a th:href="${'/content?id='+news.id}" class="hmc4_aBox scaleImg">
                        <div class="overflowHide">
                            <div class="bgImg"><img th:src="${news.imgSrc}" width="380" height="210"></div>
                            <div class="hmc4_tm" th:text="${#dates.format(news.updateTime, 'yyyy-MM-dd')}"></div>
                        </div>
                        <div class="hmc4Bom">
                            <strong class="transition" th:text="${news.title}"></strong>
                            <p th:utext="${news.realTitle}"></p>
                            <span>了解更多</span>
                        </div>
                    </a>
                </li>
            </ul>
            <a href="/news" class="hmc4_more wOpacity wow fadeIn" data-wow-delay="0.3s">更多新闻</a>
        </div>
    </div>
    <script>
        $(function () {
            $("#indexLi").addClass("hover");
            $("#getCode").click(function () {
                if (checkName() && checkTel()) {
                    var name = $("#telname").val();
                    var tel = $("#teltel").val();
                    if (pedding) {
                        return false;
                    }

                    pedding = true;
                    settime();
                    $.get('/sendSMS', {name: name, tel: tel}, function (data) {
                    })
                }
            })
            $("#free").click(function () {
                if (checkName() && checkTel() && checkCode()) {
                    var tel = $("#teltel").val();
                    var code = $("#telcode").val();
                    $.get('/validateCode', {tel: tel, code: code}, function (data) {
                        if (data.result) {
                            alert("登陆成功，尽情下载吧！")
                            location.reload();
                        } else {
                            alert("验证码错误，请重试！")
                            return false;
                        }
                    })
                }
            })
        })
        var pedding = false;
        var countdown = 60;

        function settime() {
            var getCode = $("#getCode");
            if (countdown == 0) {
                pedding = false;
                getCode.html("获取验证码")
                countdown = 60;
                return false;
            } else {
                pedding = true;
                getCode.html("重新发送(" + countdown + ")");
                countdown--;
            }
            setTimeout(function () {
                settime();
            }, 1000);
        }

        function checkName() {
            var name = $("#telname").val();
            if (name == "") {
                alert("请输入姓名")
                return false;
            }
            return true;
        }

        function checkTel() {
            var tel = $("#teltel").val();
            if (tel == '') {
                alert("请输入您的电话！");
                return false
            }
            if (!(/^1[34578]\d{9}$/.test(tel))) {
                alert("手机号码有误！");
                return false;
            }
            return true;
        }

        function checkCode() {
            var tel = $("#teltel").val();
            var code = $("#telcode").val();
            if (code == '') {
                alert("请输入验证码！");
                return false
            }
            return true;
        }
    </script>
</div>
</html>